import React, { useEffect, useMemo, useState } from 'react';
import { View, Text, Image } from '@tarojs/components';
import './index.less';
import classNames from 'classnames';
import { convertToArray } from '@/src/utils/commonFun';
import HighlightText from '../highLight';
import store from '@/src/store';
import { netWorkErrorInfo } from '@/src/utils/constants';
import Taro from '@tarojs/taro';
import { halfScreenJump } from '@/src/utils/halfScreen';

// 评论子组件
export interface CommentItemProps {
  /** 取消按钮点击事件 */
  gotoDetail: (id: string, name: string) => void;
  mine?: boolean;
  edit?: boolean;
  select?: boolean;
  data?: any;
  home?: boolean;
  handleSelect?: (data: any) => void;
}

export default function CommentItem({
  gotoDetail,
  handleSelect,
  mine,
  edit,
  data,
  home,
}: CommentItemProps) {
  // 假设这是一个函数组件
  const [imgStyle, setImgStyle] = useState({});
  const contentImage: any = convertToArray(data.contentImage);
  const commentContainerClass = classNames(
    'home-comment-container',
    `home-comment-container-${edit}`
  );
  useEffect(() => {
    //循环contentImage动态计算宽度和高度,如果发现是长方形则截取中间部分内容展示
  }, []);
  //跳转雪茄详情
  const gotoCigaDetail = (e: any, data: any) => {
    e.stopPropagation(); // 阻止冒泡
    e.preventDefault(); // 防止默认
    //判断网络状态，如果没有网络则不可点击
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    Taro.navigateTo({
      url: `/subPagesWiki/cigaDetail/index?sku=${data.cigarSku}`,
    });
  };
  //跳转雪茄柜详情
  const gotoCigaCabinetDetail = (e: any, data: any) => {
    e.stopPropagation(); // 阻止冒泡
    e.preventDefault(); // 防止默认

    //判断网络状态，如果没有网络则不可点击
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    if (
      data.contentCigarCabinetVo &&
      data.contentCigarCabinetVo.productShopPath
    ) {
      halfScreenJump(data.contentCigarCabinetVo.productShopPath, {
        onFail: (err) => {
          //打开失败回调
          Taro.showToast({
            title: '暂无商品信息，请稍后再试',
            icon: 'none',
          });
        },
        onReturn: ({ reason, extraData }) => {
          //关闭半屏回调
          console.log('return reason:', reason, extraData);
        },
      });
    } else {
      Taro.showToast({ title: '暂无商品信息，请稍后再试', icon: 'none' });
    }
  };
  //用户标签
  const getImageSrc = useMemo(() => {
    switch (data.userInfoVo && data.userInfoVo.tag) {
      case '品牌方':
        return require('../../assert/imgs/user/pinpai.png');
      case '大咖':
        return require('../../assert/imgs/user/daka.png');
      case '雪茄吧':
        return require('../../assert/imgs/user/xuejiaba.png');
      case '侍咖师':
        return require('../../assert/imgs/user/shikashi.png');
      default: // 包括 null 的情况
        return null;
    }
  }, [data.userInfoVo]);
  return (
    <View className={commentContainerClass}>
      {/* 左侧选择框 */}
      {mine && edit && (
        <View className="home-comment-left">
          <Image
            className="home-comment-btn"
            onClick={() => handleSelect(data)}
            src={
              data.select
                ? 'https://file.linkcook.cn/image/wineMiniProgram/login/checked.png'
                : 'https://file.linkcook.cn/image/wineMiniProgram/login/unchecked.png'
            }
          />
        </View>
      )}
      {/* 右侧内容 */}
      <View className="home-comment-right">
        {/* <Text className="home-comment-title clamp1">{data.title}</Text> */}
        <View
          className="home-comment-title clamp1"
          onClick={() => gotoDetail(data, 'comment')}
        >
          <HighlightText text={data?.title}></HighlightText>
        </View>
        {!mine && (
          <View
            className="home-comment-header"
            onClick={() => gotoDetail(data, 'userCenter')}
          >
            <Image
              className="protrait-icon"
              src={data && data.userInfoVo && data.userInfoVo.ucAvatarUrl}
            />
            <Text className="protrait-name">
              {data && data.userInfoVo && data.userInfoVo.ucNickname}
            </Text>
            <Image
              className="protrait-tag"
              src={data && data.userInfoVo && getImageSrc}
            />
          </View>
        )}
        <View onClick={() => gotoDetail(data, 'comment')}>
          <Text className="clamp4">{data.content}</Text>
          <View
            className={`home-comment-list home-comment-list-${contentImage.length}`}
          >
            {contentImage &&
              contentImage.slice(0, 9).map((item: any, index: number) => (
                <View className="home-comment-item" key={index}>
                  {/* 占位层：决定方形比例，避免高度抖动 */}
                  <View className="pad" />
                  <Image
                    className="home-comment-img"
                    src={item}
                    mode="aspectFill"
                  />
                </View>
              ))}
          </View>
          <View className="home-comment-brower">
            <Text className="home-comment-brower-text">
              {data.view > 10000
                ? Math.floor(data.view / 10000) + '万+'
                : data.view}
              浏览
            </Text>

            {data.contentCigarCabinetVo &&
              data.contentCigarCabinetVo.contentCigarCabinetBrand !== null && (
                <View
                  className="home-comment-brower-name clamp1"
                  onClick={(e) => gotoCigaCabinetDetail(e, data)}
                >
                  <Text className="author">
                    {data.contentCigarCabinetVo &&
                      data.contentCigarCabinetVo.contentCigarCabinetBrand}{' '}
                    {data.contentCigarCabinetVo &&
                      data.contentCigarCabinetVo.contentCigarCabinetZh}
                  </Text>
                  {data.contentCigarCabinetVo &&
                    data.contentCigarCabinetVo.contentCigarCabinetBrand !==
                      null && (
                      <Image
                        className="arrow"
                        src="https://file.linkcook.cn/image/wineMiniProgram/home/arrow.png"
                      />
                    )}
                </View>
              )}
            {!(
              data.contentCigarCabinetVo &&
              data.contentCigarCabinetVo.contentCigarCabinetBrand
            ) &&
              data.contentCigarVo &&
              data.contentCigarVo.contentCigarBrand !== null && (
                <View
                  className="home-comment-brower-name clamp1"
                  onClick={(e) => gotoCigaDetail(e, data.contentCigarVo)}
                >
                  <Text className="author">
                    {data.contentCigarVo &&
                      data.contentCigarVo.contentCigarBrand}{' '}
                    {data.contentCigarVo && data.contentCigarVo.contentCigarZh}
                  </Text>
                  {data.contentCigarVo &&
                    data.contentCigarVo.contentCigarBrand !== null && (
                      <Image
                        className="arrow"
                        src="https://file.linkcook.cn/image/wineMiniProgram/home/arrow.png"
                      />
                    )}
                </View>
              )}
          </View>
        </View>
      </View>
    </View>
  );
}
